<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">

	var code = ["A","B","C","D","E","F","G","H","I","J"];
	var cis = ["1","0"];
	var pNum=0,index=0,titleType='sign';
	
	$(function(){
		

	});
	function removeOption(id){
		$('#'+id).remove();
		var ps = $('#optionTd p');
		index=0;
		$.each(ps,function(i,p){
			var f = $(this).find('font');
			$(f).html(code[index]);
			index++;
		});
		theAnswer();
	}
	
	function addOption(){
		var option = '<p style="margin: 5px 0px" id="p'+pNum+'">'+
			'<font style="color:\'red\'">'+code[index]+'</font>:'+
				'<input style="width:350px">'+
				'<a href="#" style="direction: none" onclick="removeOption(\'p'+pNum+'\')">移除</a>'+
			'</p>';
		$('#optionTd').append(option);
		pNum +=1;
		index++;
		theAnswer();
	}
	function theAnswer(){
		var type="radio";
		$('#answerTd').empty();
		
		if('sign'==titleType){
			$('#optionTr').show();
			type="radio";
		}else if('muti'==titleType){
			$('#optionTr').show();
			type="checkbox";
		}else if('is'==titleType){
			$('#optionTd').empty();
			$('#optionTr').hide();
			index=0;
			var answer = '<input type="radio" name="answer1" value="1">正确';
			answer += '<input type="radio" name="answer1" value="0">错误';
			$('#answerTd').append(answer);
		}else if('text'==titleType||'input'==titleType){
			$('#optionTd').empty();
			$('#optionTr').hide();
			index=0;
			var answer = '<textarea id="other" rows="5" cols="35"></textarea>';
			$('#answerTd').append(answer);
		}
		for(var i=0;i<index;i++){
			var answer = '<input type="'+type+'" name="answer1" value="'+code[i]+'">'+code[i];
			$('#answerTd').append(answer);
		}
	}
</script>
	<form id="dataForm">
		<input type="hidden" name="options" id="options_" value="">
		<input type="hidden" name="answer" id="answers_" value="">
      	<table class="kv-table">
			<tbody>
				<tr>
					<td class="kv-label">出题人</td>
					<td colspan="3" class="kv-content">
					<input type="hidden" name="loginName" value="${eu.loginName }">
					<input class="easyui-textbox" readonly value="${eu.name }"
						style="height: 28px;line-height: 24px;width:200px">
					
					</td>
				</tr>
				<tr>
					<td class="kv-label">题目类型</td>
					<td colspan="3" class="kv-content">
						<select id="cc" class="easyui-combobox" name="type" 
						 style="width:200px;" data-options="
						 	onSelect:function(record){
						 		titleType = record.value;
						 		theAnswer();
						 	}
						 ">   
						    <option value="sign">单选题</option>   
						    <option value="muti">多选题</option>   
						    <option value="is">判断题</option>   
						    <option value="text">主观题</option>   
						    <option value="input">填空题</option>   
						</select>
					</td>
				</tr>
				<tr>
					<td class="kv-label">题目</td>
					<td colspan="3" class="kv-content">
						<input multiline=true required="required" class="easyui-textbox" name="title"
						style="height: 28px;line-height: 24px;width:500px">
					</td>
				</tr>
				<tr id="optionTr">
					<td class="kv-label">
						<a href="#" plain=false class="easyui-linkbutton" 
						iconCls="icon-add" onclick="addOption()">选项</a>
					</td>
					<td colspan="3" class="kv-content" id="optionTd">
					</td>
				</tr>
				<tr>
					<td class="kv-label">答案</td>
					<td colspan="3" class="kv-content" id="answerTd">
						
					</td>
				</tr>
				
				<tr>
					<td class="kv-label">分数</td>
					<td class="kv-content" colspan="3">
						<input id="ss" name="score" class="easyui-numberspinner" style="width:80px;height: 30px"   
        				required="required" data-options="min:1,max:100,editable:false">	
					</td>
				</tr>
				<tr>
					<td class="kv-label">科目</td>
					<td id="fileTd" class="kv-content" colspan="3">
						<select id="cc1" class="easyui-combobox" 
						name="lesson" style="width:200px;">   
						    <option value="java">Java</option>   
						    <option value=".net">.net</option>   
						    <option value="php">php</option>   
						    <option value="android">安卓</option>   
						    <option value="ios">苹果</option>   
						</select> 
					</td>
				</tr>
			</tbody>
		</table>
	</form>
</body>
</html>